<template>
    <div>
        <van-nav-bar
                title="首页"
                left-text="返回"
                right-text="按钮"
                left-arrow
                border
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <banner></banner>
        <grid></grid>
        <!--下拉加载-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <van-cell v-for="item in list" :key="item" :title="item" />
            </van-list>
        </van-pull-refresh>
    </div>

</template>

<script>
import Banner from './Banner'
import Grid from './Grid'
import Vue from 'vue'
import { NavBar,Toast,List,PullRefresh,Cell, CellGroup} from 'vant';
Vue.use(NavBar).use(List).use(Toast).use(PullRefresh).use(Cell).use(CellGroup);
  export default {
    name: "Home",
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        refreshing: false
      };
    },
    components:{
      Banner,
      Grid
    },
      methods:{
          onClickLeft() {
              this.$router.go(-1)
          },
          onClickRight() {
              Toast('提示内容');
          },
        onLoad() {
          setTimeout(() => {
            if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }

            for (let i = 0; i < 10; i++) {
              this.list.push(this.list.length + 1);
            }
            this.loading = false;

            if (this.list.length >= 40) {
              this.finished = true;
            }
          }, 1000);
        },
        onRefresh() {
          // 清空列表数据
          this.finished = false;

          // 重新加载数据
          // 将 loading 设置为 true，表示处于加载状态
          this.loading = true;
          this.onLoad();
        }
      }
  }
</script>

<style scoped>

</style>
